@keyframes play-shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

.storm-play-again {
  @extend %flex-center;

  justify-content: center;
  font-size: 1.5em;
  letter-spacing: 0.4em;
  padding: 1em 0;

  @include breakpoint($mq-xx-small) {
    font-size: 2em;
    padding: 1em 2em;
  }

  @include breakpoint($mq-small) {
    justify-content: space-between;
    letter-spacing: 0.6em;

    &::before,
    &::after {
      content: ' ';
      width: 7rem;
      height: 7rem;
      background-image: img-url('icons/tornado-white.svg');
      background-size: cover;
      opacity: 0.8;
      transition: opacity 0.5s;
    }

    &[href]:hover {
      &::before,
      &::after {
        opacity: 1;
        animation: play-shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
      }

      &:after {
        animation-delay: 0.1s;
      }

      @media (prefers-reduced-motion: reduce) {
        &::before,
        &::after {
          animation: none;
        }
      }
    }
  }
}
